<!--
 * @Description: 文件描述
 * @Author: 1+
 * @Date: 2024-03-18 08:43:38
 * @LastEditors: 1+
 * @LastEditTime: 2024-08-29 08:39:26
-->
<template>
  <div class="header">
    <div class="left">
      <img
        src="@/assets/images/home.jpg"
        alt=""
      >
      <i
        v-for="item in btnList"
        :key="item.value"
        class="icon"
        :class="[{ active: isActive(item.value) }, item.icon]"
        @click="clickHandle(item)"
      />
    </div>
    <span class="title">江西省自然保护地大屏可视化</span>
    <div class="right">
      <el-tooltip
        content="预览"
        effect="light"
      >
        <i
          class="el-font-view icon"
          @click="preview"
        />
      </el-tooltip>
      <el-tooltip
        content="导出图片"
        effect="light"
      >
        <i
          class="el-font-photo icon"
          @click="exportHandle"
        />
      </el-tooltip>
      <!-- <el-button icon="el-icon-crop" size="small" @click="preview">
        预览
      </el-button> -->
    </div>
  </div>
</template>

<script>
import html2Canvas from 'html2canvas'
import { downloadFile } from '@/utils'
import { mapGetters,mapMutations } from 'vuex'
export default {
  computed: {
    ...mapGetters(['editCanvasConfig','componentList','layers','charts','configs'])
  },
  data () {
    return {
      btnList: [
        {
          value: 'charts',
          icon: 'el-font-chart'
        },
        {
          value: 'layers',
          icon: 'el-font-layer'
        },
        {
          value: 'configs',
          icon: 'el-font-set'
        }
      ]
    }
  },
  methods: {
    ...mapMutations('aside',['setItem']),
    ...mapMutations('chartEdit',['setTargetSelectChart']),
    preview () {
      // this.$router.push('/preview')
      let storageInfo={ editCanvasConfig: this.editCanvasConfig,componentList: this.componentList }
      let storageList=JSON.parse(sessionStorage.getItem('chartList'))||[]
      // if(storageList.length){
      // }else{
      sessionStorage.setItem('chartList',JSON.stringify([{ ...storageInfo }]))
      // }
      let { href }=this.$router.resolve({ path: '/preview' })
      window.open(href,'_blank')
    },
    // 左侧布局处理
    clickHandle (item) {
      this.setItem({ key: item.value,value: !this[item.value] })
    },
    // 导出图片
    exportHandle () {
      // 取消选中
      this.setTargetSelectChart({ id: undefined })
      // 导出图片
      let screen=document.querySelector('.edit-range')
      setTimeout(() => {
        html2Canvas(screen,{
          allowTaint: true,
          taintTest: false,
          useCORS: true,
        }).then((canvas) => {
          downloadFile(canvas.toDataURL(),'数据大屏.png')
          this.$message.success('导出成功!')
        })
      },10)
    },
    isActive (value) {
      return this[value]
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  .left {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .title {
    font-weight: bold;
    font-size: 24px;
    color: #47e0c4;
    text-shadow: green 1px 2px 1px;
  }
  .right {
    display: flex;
    align-items: center;
    gap: 20px;
    i:hover {
      color: #47e0c4;
      border-color: #47e0c4;
    }
  }
}
i {
  cursor: pointer;
  &.active {
    color: #47e0c4;
    border-color: #47e0c4;
  }
}
.icon {
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
</style>